A especificação do HTML5 foi criada propondo uma mudança radical na web. A primeira coisa foi organizar a colcha de retalhos feitas de muitos recursos externos ao browser. Ela tentou deixar tudo apenas para o browser fazer e com isto melhorar, e muito, a segurança do browser. Ela fechou o browser dentro de si ( não pode sequer sair da pasta onde a página foi obtida) e com isso revolucionou a segurança do servidor web.
Para implementar essa mudança viu que tinha adicionar funcionalidades como, por exemplo, remover o recurso flash player ( que sempre foi um risco a segurança) e colocar um recurso para exibir vídeo nativamente no browser.
Foi tão grande as mudanças que tiveram que fazer uma nova especificação de CSS ( CSS3 ) que incorporou muitas tags de formatação e posicionamento. Muitos recursos novos foram incorporados as velhas tags dando flexibilidade extra no seu uso.
O browser que antes era uma simples camada de apresentação agora, somando todos esses recursos, passou a ser um componente muito mais 'pesado', comilão de memória. Quantas vezes a gente ouve falar que basta abrir meia dúzia de abas do chrome que o computador 'cai de boca no chão', ou seja, fica lerdo, sem memória, consumindo muita HD...simplesmente trava. Como a gente diz...não tem nada grátis, tudo tem um custo.
As tags que eram bem simplorias passaram a ter recursos de exibição, formatação, posicionamento dentro dos seus estilos. Como a mudança foi grande nem sempre conhecemos sequer o básico para enfrentar alguns problemas. Sendo assim abaixo descrevo os principais parâmetros dos objetos de estilo. A intenção não é detalhar cada uma delas mas informar que elas existem e para que servem cada uma delas.
Categoria | Propriedade | Descrição |
Align | alignContent | Define ou retorna o alinhamento entre as linhas dentro de um contêiner flexível quando os itens não ocupam todo o espaço disponível |
alignItems | Define ou retorna o alinhamento para itens dentro de um contêiner flexível | |
alignSelf | Define ou retorna o alinhamento para itens selecionados dentro de um contêiner flexível | |
Animation | Animation | Uma propriedade abreviada para todas as propriedades de animação abaixo, exceto a propriedade animationPlayState |
animationDelay | Define ou retorna quando a animação vai começar | |
animationDirection | Define ou retorna se a animação deve ou não ser reproduzida ao contrário em ciclos alternados | |
animationDuration | Define ou retorna quantos segundos ou milissegundos uma animação leva para completar um ciclo | |
animationFillMode | Define ou retorna quais valores são aplicados pela animação fora do tempo em que ela está sendo executada | |
animationIterationCount | Define ou retorna o número de vezes que uma animação deve ser executada | |
animationName | Define ou retorna um nome para a animação @keyframes | |
animationTimingFunction | Define ou retorna a curva de velocidade da animação | |
animationPlayState | Define ou retorna se a animação está rodando ou pausada | |
background | background | Define ou retorna todas as propriedades do plano de fundo em uma declaração |
backgroundAttachment | Define ou retorna se uma imagem de fundo é fixa ou rola com a página | |
backgroundColor | Define ou retorna a cor de fundo de um elemento | |
backgroundImage | Define ou retorna a imagem de fundo para um elemento | |
backgroundPosition | Define ou retorna a posição inicial de uma imagem de fundo | |
backgroundRepeat | Define ou retorna como repetir (lado a lado) uma imagem de fundo | |
backgroundClip | Define ou retorna a área de pintura do fundo | |
backgroundOrigin | Define ou retorna a área de posicionamento das imagens de fundo | |
backgroundSize | Define ou retorna o tamanho da imagem de fundo | |
backfaceVisibility | backfaceVisibility | Define ou retorna se um elemento deve ou não ficar visível quando não estiver voltado para a tela |
border | border | Define ou retorna borderWidth, borderStyle e borderColor em uma declaração |
borderBottom | Define ou retorna todas as propriedades borderBottom em uma declaração | |
borderBottomColor | Define ou retorna a cor da borda inferior | |
borderBottomLeftRadius | Define ou retorna a forma da borda do canto inferior esquerdo | |
borderBottomRightRadius | Define ou retorna a forma da borda do canto inferior direito | |
borderBottomStyle | Define ou retorna o estilo da borda inferior | |
borderBottomWidth | Define ou retorna a largura da borda inferior | |
borderCollapse | Define ou retorna se a borda da tabela deve ser recolhida em uma única borda ou não | |
borderColor | Define ou retorna a cor da borda de um elemento (pode ter até quatro valores) | |
borderImage | Uma propriedade abreviada para definir ou retornar todas as propriedades borderImage | |
borderImageOutset | Define ou retorna a quantidade pela qual a área da imagem de borda se estende além da caixa de borda | |
borderImageRepeat | Define ou retorna se a borda da imagem deve ser repetida, arredondada ou esticada | |
borderImageSlice | Define ou retorna os deslocamentos internos da borda da imagem | |
borderImageSource | Define ou retorna a imagem a ser usada como borda | |
borderImageWidth | Define ou retorna as larguras da borda da imagem | |
borderLeft | Define ou retorna todas as propriedades borderLeft em uma declaração | |
borderLeftColor | Define ou retorna a cor da borda esquerda | |
borderLeftStyle | Define ou retorna o estilo da borda esquerda | |
borderLeftWidth | Define ou retorna a largura da borda esquerda | |
borderRadius | Uma propriedade abreviada para definir ou retornar todas as quatro propriedades borderRadius | |
borderRight | Define ou retorna todas as propriedades borderRight em uma declaração | |
borderRightColor | Define ou retorna a cor da borda direita | |
borderRightStyle | Define ou retorna o estilo da borda direita | |
borderRightWidth | Define ou retorna a largura da borda direita | |
borderSpacing | Define ou retorna o espaço entre as células em uma tabela | |
borderStyle | Define ou retorna o estilo da borda de um elemento (pode ter até quatro valores) | |
borderTop | Define ou retorna todas as propriedades borderTop em uma declaração | |
borderTopColor | Define ou retorna a cor da borda superior | |
borderTopLeftRadius | Define ou retorna a forma da borda do canto superior esquerdo | |
borderTopRightRadius | Define ou retorna a forma da borda do canto superior direito | |
borderTopStyle | Define ou retorna o estilo da borda superior | |
borderTopWidth | Define ou retorna a largura da borda superior | |
borderWidth | Define ou retorna a largura da borda de um elemento (pode ter até quatro valores) | |
bottom | bottom | Define ou retorna a posição inferior de um elemento posicionado |
box | boxDecorationBreak | Define ou retorna o comportamento do plano de fundo e da borda de um elemento na quebra de página ou, para elementos in-line, na quebra de linha. |
boxShadow | Anexa uma ou mais sombras projetadas à caixa | |
boxSizing | Permite definir certos elementos para caber em uma área de uma certa maneira | |
captionSide | captionSide | Define ou retorna a posição da legenda da tabela |
caretColor | caretColor | Define ou retorna a cor do cursor/cursor de um el |
clear | clear | Define ou retorna a posição do elemento em relação aos objetos flutuantes |
clip | clip | Define ou retorna qual parte de um elemento posicionado é visível |
color | color | Define ou retorna a cor do texto |
column | columnCount | Define ou retorna o número de colunas em que um elemento deve ser dividido |
columnFill | Define ou retorna como preencher as colunas | |
columnGap | Define ou retorna o espaço entre as colunas | |
columnRule | Uma propriedade abreviada para definir ou retornar todas as propriedades columnRule | |
columnRuleColor | Define ou retorna a cor da regra entre as colunas | |
columnRuleStyle | Define ou retorna o estilo da regra entre as colunas | |
columnRuleWidth | Define ou retorna a largura da regra entre as colunas | |
columns | Uma propriedade abreviada para definir ou retornar columnWidth e columnCount | |
columnSpan | Define ou retorna quantas colunas um elemento deve abranger | |
columnWidth | Define ou retorna a largura das colunas | |
content | content | Usado com os pseudo-elementos :before e :after, para inserir o conteúdo gerado |
counter | counterIncrement | Incrementa um ou mais contadores |
counterReset | counterReset | Cria ou redefine um ou mais contadores |
cursor | cursor | Define ou retorna o tipo de cursor a ser exibido para o ponteiro do mouse |
Direction | Direction | Define ou retorna a direção do texto |
Display | Display | Define ou retorna o tipo de exibição de um elemento |
emptyCells | emptyCells | Define ou retorna se mostra a borda e o fundo das células vazias ou não |
filter | filter | Define ou retorna filtros de imagem (efeitos visuais, como desfoque e saturação) |
flex | flex | Define ou retorna o comprimento do item, relativo ao restante |
flexBasis | Define ou retorna o comprimento inicial de um item flexível | |
flexDirection | Define ou retorna a direção dos itens flexíveis | |
flexFlow | Uma propriedade abreviada para as propriedades flexDirection e flexWrap | |
flexGrow | Define ou retorna quanto o item crescerá em relação ao restante | |
flexShrink | Define ou retorna como o item encolherá em relação ao restante | |
flexWrap | Define ou retorna se os itens flexíveis devem ser encapsulados ou não | |
cssFloat | cssFloat | Define ou retorna o alinhamento horizontal de um elemento |
font | font | Define ou retorna fontStyle, fontVariant, fontWeight, fontSize, lineHeight e fontFamily em uma declaração |
fontFamily | Define ou retorna a família de fontes para o texto | |
fontSize | Define ou retorna o tamanho da fonte do texto | |
fontStyle | Define ou retorna se o estilo da fonte é normal, itálico ou oblíquo | |
fontVariant | Define ou retorna se a fonte deve ser exibida em letras maiúsculas minúsculas | |
fontWeight | Define ou retorna o negrito da fonte | |
fontSizeAdjust | Preserva a legibilidade do texto quando ocorre fallback de fonte | |
fontStretch | Seleciona uma face normal, condensada ou expandida de uma família de fontes | |
hangPunctuation | hangPunctuation | Especifica se um caractere de pontuação pode ser colocado fora da caixa de linha |
height | height | Define ou retorna a altura de um elemento |
hifens | hifens | Define como dividir palavras para melhorar o layout dos parágrafos |
icon | icon | Fornece ao autor a capacidade de estilizar um elemento com um equivalente icônico |
imageOrientation | imageOrientation | Especifica uma rotação na direção direita ou no sentido horário que um agente de usuário aplica a uma imagem |
isolation | isolation | Define se um elemento deve criar um novo conteúdo de empilhamento |
justifyContent | Define ou retorna o alinhamento entre os itens dentro de um contêiner flexível quando os itens não ocupam todo o espaço disponível. | |
left | left | Define ou retorna a posição esquerda de um elemento posicionado |
letterSpacing | letterSpacing | Define ou retorna o espaço entre os caracteres em um texto |
lineHeight | lineHeight | Define ou retorna a distância entre linhas em um texto |
list | listStyle | Define ou retorna listStyleImage, listStylePosition e listStyleType em uma declaração |
listStyleImage | Define ou retorna uma imagem como marcador de item de lista | |
listStylePosition | Define ou retorna a posição do marcador de item de lista | |
listStyleType | Define ou retorna o tipo de marcador de item de lista | |
margin | margin | Define ou retorna as margens de um elemento (pode ter até quatro valores) |
marginBottom | Define ou retorna a margem inferior de um elemento | |
marginLeft | Define ou retorna a margem esquerda de um elemento | |
marginRight | Define ou retorna a margem direita de um elemento | |
marginTop | Define ou retorna a margem superior de um elemento | |
Width | maxWidth | Define ou retorna a largura máxima de um elemento |
minWidth | Define ou retorna a largura mínima de um elemento | |
Height | minHeight | Define ou retorna a altura mínima de um elemento |
maxHeight | Define ou retorna a altura máxima de um elemento | |
nav | navDown | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para baixo |
navIndex | Define ou retorna a ordem de tabulação para um elemento | |
navLeft | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para a esquerda | |
navRight | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para a direita | |
navUp | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para cima | |
object | objectFit | Especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida por sua altura e largura usadas |
objectPosition | Especifica o alinhamento do elemento substituído dentro de sua caixa | |
opacity | opacity | Define ou retorna o nível de opacidade de um elemento |
order | order | Define ou retorna a ordem do item flexível, em relação ao restante |
orphans | Define ou retorna o número mínimo de linhas para um elemento que deve ser deixado no final de uma página quando ocorre uma quebra de página dentro de um elemento | |
out | outline | Define ou retorna todas as propriedades de contorno em uma declaração |
outlineColor | Define ou retorna a cor do contorno ao redor de um elemento | |
outlineOffset | Desloca um contorno e o desenha além da borda da borda | |
outlineStyle | Define ou retorna o estilo do contorno ao redor de um elemento | |
outlineWidth | Define ou retorna a largura do contorno ao redor de um elemento | |
over | overflow | Define ou retorna o que fazer com o conteúdo que renderiza fora da caixa do elemento |
overflowX | Especifica o que fazer com as bordas esquerda/direita do conteúdo, se estourar a área de conteúdo do elemento | |
overflowY | Especifica o que fazer com as bordas superior/inferior do conteúdo, se estourar a área de conteúdo do elemento | |
padding | padding | Define ou retorna o preenchimento de um elemento (pode ter até quatro valores) |
paddingBottom | Define ou retorna o preenchimento inferior de um elemento | |
paddingLeft | Define ou retorna o preenchimento esquerdo de um elemento | |
paddingRight | Define ou retorna o preenchimento correto de um elemento | |
paddingTop | Define ou retorna o preenchimento superior de um elemento | |
page | pageBreakAfter | Define ou retorna o comportamento de quebra de página após um elemento |
pageBreakBefore | Define ou retorna o comportamento de quebra de página antes de um elemento | |
pageBreakInside | Define ou retorna o comportamento de quebra de página dentro de um elemento | |
perspective | Define ou retorna a perspectiva de como os elementos 3D são visualizados | |
perspectiveOrigin | perspectiveOrigin | Define ou retorna a posição inferior dos elementos 3D |
position | position | Define ou retorna o tipo de método de posicionamento usado para um elemento (estático, relativo, absoluto ou fixo) |
quotes | quotes | Define ou retorna o tipo de aspas para aspas incorporadas |
resize | resize | Define ou retorna se um elemento é ou não redimensionável pelo usuário |
right | right | Define ou retorna a posição correta de um elemento posicionado |
scroll | scrollBehavior | Especifica se deve animar suavemente a posição de rolagem, em vez de um salto direto, quando o usuário clica em um link dentro de uma caixa rolável. |
tableLayout | tableLayout | Define ou retorna a maneira de dispor as células, linhas e colunas da tabela |
tabSize | tabSize | Define ou retorna o comprimento do caractere de tabulação |
text | textAlign | Define ou retorna o alinhamento horizontal do texto |
textAlignLast | Define ou retorna como a última linha de um bloco ou uma linha logo antes de uma quebra de linha forçada é alinhada quando text-align é "justificado" | |
textDecoration | Define ou retorna a decoração de um texto | |
textDecorationColor | Define ou retorna a cor da decoração do texto | |
textDecorationLine | Define ou retorna o tipo de linha em uma decoração de texto | |
textDecorationStyle | Define ou retorna o estilo da linha em uma decoração de texto | |
textIndent | Define ou retorna o recuo da primeira linha do texto | |
textJustify | Define ou retorna o método de justificação usado quando text-align é "justify" | |
textOverflow | Define ou retorna o que deve acontecer quando o texto transborda o elemento que o contém | |
textShadow | Define ou retorna o efeito de sombra de um texto | |
textTransform | Define ou retorna a capitalização de um texto | |
top | top | Define ou retorna a posição superior de um elemento posicionado |
transform | transform | Aplica uma transformação 2D ou 3D a um elemento |
transformOrigin | Define ou retorna a posição dos elementos transformados | |
transformStyle | Define ou retorna como os elementos aninhados são renderizados no espaço 3D | |
transition | transition | Uma propriedade abreviada para definir ou retornar as quatro propriedades de transição |
transition | transitionProperty | Define ou retorna a propriedade CSS para a qual o efeito de transição é |
transitionDuration | Define ou retorna quantos segundos ou milissegundos um efeito de transição leva para ser concluído | |
transitionTimingFunction | Define ou retorna a curva de velocidade do efeito de transição | |
transiçãoDelay | Define ou retorna quando o efeito de transição começará | |
unicodeBidi | unicodeBidi | Define ou retorna se o texto deve ser substituído para suportar vários idiomas no mesmo documento |
userSelect | userSelect | Define ou retorna se o texto de um elemento pode ser selecionado ou não |
verticalAlign | verticalAlign | Define ou retorna o alinhamento vertical do conteúdo em um elemento |
visibility | visibility | Define ou retorna se um elemento deve ser visível |
whiteSpace | whiteSpace | Define ou retorna como lidar com tabulações, quebras de linha e espaços em branco em um texto |
width | Define ou retorna a largura de um elemento | |
word | wordBreak | Define ou retorna regras de quebra de linha para scripts não CJK |
wordSpacing | Define ou retorna o espaçamento entre palavras em um texto | |
wordWrap | Permite que palavras longas e inquebráveis sejam quebradas e quebradas na próxima linha | |
widows | widows | Define ou retorna o número mínimo de linhas para um elemento que deve estar visível no topo de uma página |
zIndex | zIndex | Define ou retorna a ordem da pilha de um elemento posicionado |
Tomei a liberdade de colocar em negrito as parâmetros / propriedades que você deve conhecer.